import { Button, Card, Space } from 'antd';
import { create } from 'zustand';
import { useStoreWithEqualityFn } from 'zustand/traditional';
import { useShallow } from 'zustand/react/shallow';

type StoreDataType = {
	num1: number;
	num2: number;
};
type StoreFnType = {
	setNum1: () => void;
	setNum2: () => void;
};

const initData: StoreDataType = { num1: 0, num2: 1 };

const useStore = create<StoreDataType & StoreFnType>((set) => ({
	...initData,

	setNum1: () => set((state) => ({ num1: state.num1 + 1 })),
	setNum2: () => set((state) => ({ num2: state.num2 + 1 }))
}));

const App1 = () => {
	console.log('App11111');
	const { num1, setNum1 } = useStore((state) => ({ num1: state.num1, setNum1: state.setNum1 }));

	return (
		<Button type="primary" onClick={setNum1}>
			App1: {num1}
		</Button>
	);
};

const App2 = () => {
	console.log('App2222');
	const { num2, setNum2 } = useStore(
		useShallow((state) => ({ num2: state.num2, setNum2: state.setNum2 }))
	);

	return (
		<Button type="primary" onClick={setNum2}>
			App2: {num2}
		</Button>
	);
};

const ReRender = () => {
	return (
		<Card>
			<Space>
				<App1 />
				<App2 />
			</Space>
		</Card>
	);
};

export default ReRender;
